<template>
    <div>
        <!--创作讯息显示 -->
<section class=" text-center title">
  <div class="container">
    <h1>创作信息</h1>
    <p class="lead ">为你的故事,留下一种味道</p>
    <p>
      <a href="#" class="btn  my-2 alert-warning">加入创作</a>
    </p>
  </div>
</section>

<!-- 创作信息 -->
<div class="container">
    <div class="row">
      <div class="col-md-4" v-for="content in contents" :key="content.id">
        <div class="card mb-4 shadow-sm pro-img ">
          <img :src="content.myimg">
          <div class="card-body">
            <p class="card-text">{{content.text}}</p>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
                <button @click="mydelete(content.id)" type="button" class="btn btn-sm btn-outline-secondary">删除评论</button>
              </div>
              <small class="text-muted">{{content.time}}</small>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>

  <div id="dibu">
    <div class="input-group mb-3">
  <input v-model="xinxi" type="text" class="form-control" placeholder="请输入你的想法" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button @click="add" class="btn btn-outline-secondary" type="button" id="button-addon2">发布消息</button>
  </div>
</div>  
  </div>  
</div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
    name:'Email',
    data() {
      return {
        xinxi:'',
        contents:[
          {
            id:nanoid(),
            myimg:require('../assets/pro1.jpg'),
            text:'第一次尝试卡通人物的拉花,味道很浓郁,加上奶之后,中和了咖啡的苦味。 是不错的味觉体验',
            time:'10 分钟前'
          },
          {
            id:nanoid(),
            myimg:require('../assets/pro2.jpg'),
            text:'自己创作的马提尼,有些涩涩的也有一丝丝的苦味,但是综合的体验是很棒的。如果可以加上奶盖或许会更棒',
            time:'10 分钟前'
          },
          {
            id:nanoid(),
            myimg:require('../assets/pro3.jpg'),
            text:'放上棉花糖的摩卡,变得可爱了许多,也给人一种很可爱的体验。棉花糖融化的甜味,也可以让手中的咖啡更香甜。',
            time:'10 分钟前'
          },
        ]
      }
    },
    methods:{
      add(){
        let a = Math.floor((Math.random())*3)+1;
        this.contents.push({
          id:nanoid(),
          myimg:require("../assets/pro"+a+".jpg"),
          text:this.xinxi,
          time:'10 分钟前'
        })
      },
      mydelete(id){
        this.contents = this.contents.filter((item)=>{
          return item.id != id
        })
      }
    }
}
</script>

<style>
    #dibu{
        width: 1140px;
        margin: 0 auto;
    }
</style>